<template>
	<view class="box">
		<map id='map' :longitude="longitude" :latitude="latitude" :markers="markers" :polyline="polyline"  @regionchange="regionchange" show-location style='width:100%;height:70vh;'></map>
		

  </view>
</template>

<script>
	import search from '../../components/search/index.vue';
	var QQMapWX = require('../../mapLine/qqmap-wx-jssdk.js');
  // 实例化API核心类
  var qqmapsdk = new QQMapWX({
    key: 'CUNBZ-6JFLG-74QQ7-IT34V-DUQ3Z-2JBPZ' // 必填
  });
	export default {
		components: {
			'v-search': search
		},
		data() {
			return {
				ployline: [],//路线渲染
        latitude: 22.7340784793,//纬度
        longitude: 113.504708375,//经度
        //标记点
        markers: [{
          iconPath: "../../static/image/index/i1.png",
          id: 0,
          longitude: 113.504508375,
          latitude: 22.7344784793,
          width: 20,
          height: 20,
        }],
			}
		},
		onLoad(e) {
			var _this = this;
      //调用距离计算接口
      qqmapsdk.direction({
        mode: 'driving',//可选值：'driving'（驾车）、'walking'（步行）、'bicycling'（骑行），不填默认：'driving',可不填
        //from参数不填默认当前地址
        from:'22.7344784793,113.504708375',
        to: '22.7342920943,108.594824432',
        success: function (res) {
          console.log(res);
          var ret = res;
          var coors = ret.result.routes[0].polyline, pl = [];
          //坐标解压（返回的点串坐标，通过前向差分进行压缩）
          var kr = 1000000;
          for (var i = 2; i < coors.length; i++) {
            coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
          }
          //将解压后的坐标放入点串数组pl中
          for (var i = 0; i < coors.length; i += 2) {
            pl.push({ latitude: coors[i], longitude: coors[i + 1] })
          }
          console.log(pl)
          //设置polyline属性，将路线显示出来,将解压坐标第一个数据作为起点
          _this.latitude = pl[0].latitude,
          _this.longitude = pl[0].longitude,
          _this.polyline = [{
            points: pl,
            color: "#20B2AA", width: 4, dottedLine: false
          }]
        },
        fail: function (error) {
          console.error(error);
        },
        complete: function (res) {
          console.log(res);
        }
      });
		},
		onShow() {
      
		},
		onUnload(e) {
			
		},
		methods: {
      regionchange(e){
        console.log('regionchange========>',e)
      }
		}
	}
</script>

<style lang="less">
  .zxb-ico{width: 32rpx; height: 32rpx; margin-right: 6rpx;}
  @keyframes height{
    0%{max-height: 30vh;}
    100%{max-height: 70vh;}
  }
  @keyframes heights{
    0%{max-height: 70vh;}
    100%{max-height: 30vh;}
  }
	.top_wrapper {
		padding: 0 20rpx;
	}

	.swiper {
		height: 54rpx;

		view {
			line-height: 54rpx;
		}
	}

	.top {
		width: 704rpx;
		height: 62rpx;
		margin: 12rpx auto 23rpx;
		border-radius: 12rpx;

		input {
			flex: 1;
		}
	}

	.top_left {
		height: 100%;
		margin-right: 23rpx;
		padding: 0 23rpx;
		border-right: 1px solid #fff;

		image {
			width: 17rpx;
			height: 17rpx;
			margin-left: 4rpx;
			margin-top: 18rpx;
		}
	}

	.top_icon {
		width: 34rpx;
		height: 34rpx;
		padding: 10rpx;
		margin: 0 23rpx;
	}

	.main {
		height: calc(100vh - 96rpx);

		map {
			width: 100%;
			height: 100%;

			&.active {
				height: 100%;
			}
		}

		&.active {
			background-color: #fff;
		}
	}

	.map_icon {
		right: 17rpx;
		bottom: 200rpx;
		position: fixed;

		image {
			width: 127rpx;
			height: 127rpx;
		}
	}
  .modal_wrapper.on{
    // .modal_center{animation-name: height; animation-duration: 0.3s; animation-fill-mode: forwards;}
    .modal_center{max-height: 70vh;}
  }
  .modal_wrapper.nos{
    // .modal_center{animation-name: heights; animation-duration: 0.3s; animation-fill-mode: forwards;}
  }
  
	.modal_wrapper {
		bottom: 0;
		left: 0;
		right: 0;
		position: fixed;
		border-radius: 29rpx 29rpx 0 0;background-color: #fff; box-shadow: 0 0 8px #ddd;
    &.all{width: 98rpx; height: 98rpx; background-color: #fff; border-radius: 50%; box-shadow: 0 0 6px #ccc; bottom: 30vh; left: auto; right: 4.5%; font-size: 20rpx; text-align: center; display: flex; align-items: center; justify-content: center;}
    .zb-top{
      height: 80rpx; border-bottom: 1px solid #ededed; display: flex; align-items: center; justify-content: space-between; max-width: 730rpx; margin: 0 auto;
      .close{width: 80rpx; height: 80rpx; display: flex; align-items: center; justify-content: center;}
      .ico{width: 40rpx; height: 40rpx;}
      .chang-scale{width: 180rpx; height: 140rpx; display: flex; align-items: center; justify-content: center;
        .l{width: 60rpx; height: 8rpx; background-color: #FF6A00; border-radius: 4rpx; margin-bottom: 20rpx;}
      }
    }
		.modal_top_title {
			height: 33rpx;
			z-index: 99;
		}
    
		.modal_center {
			overflow-y: auto; transition: all ease 0.3s;
			max-height: 30vh;
		}
	}

	.modal_list {
		padding: 0 31rpx; border-bottom: 16rpx solid #f5f5f5;
		margin: 33rpx auto;
		background-color: #fff;
		box-sizing: border-box;

		&:first-child {
			margin-top: 0;
		}

		.modal_top {
			margin-top: 23rpx;
			margin-bottom: 12rpx;
			padding-bottom: 12rpx;
			
		}
    .modal_btn {
    	margin-left: 38rpx;
    	padding: 8rpx 12rpx;
    	border-radius: 12rpx;
    	background: linear-gradient(273deg, #EE8332 0%, #FF6A00 100%);
    }
		.modal_image {
			width: 152rpx;
			height: 152rpx;
			overflow: hidden;
			position: relative;
			margin-right: 29rpx;
			border-radius: 23rpx;

			.bg_image {
				width: 100%;
				height: 100%;

				&.active {
					filter: blur(4px);
				}
			}

			.bg_icon {
				left: 0;
				right: 0;
				bottom: 0;
				width: 100%;
				height: 33rpx;
				position: absolute;
			}
		}

		.modal_content {
			flex: 1;

			
		}

		.modal_m1 {
			margin: 8rpx 0;
		}

		.modal_bottom {
      border-top: 1px dashed #D2D2D2; padding-top: 20rpx; margin-top: 20rpx;
			.modal_bottom_block {
				padding: 4rpx 12rpx;
				border-radius: 12rpx;
				margin-right: 23rpx;
				// margin-bottom: 23rpx;

				&:first-child {
					background-color: #FE9A01;
				}

				&:nth-child(2) {
					background-color: #FDC400;
				}

				&:nth-child(3) {
					background-color: #4B7CE5;
				}
			}
		}
	}

	.map_wrapper {
		position: relative;

		.map_centre {
			top: 50%;
			left: 50%;
			position: absolute;
			-webkit-transform: translateX(-50%) translateY(-50%);

			image {
				width: 40rpx;
				height: 66rpx;
			}
		}
	}

	.top /deep/ .van-cell {
		padding: 0 20rpx 0 0;
		background-color: transparent;
	}

	.quxiao {
		padding: 20rpx;
		height: 62rpx;
		margin-top: 12rpx;
		box-sizing: border-box;
	}

	.text-ellipsis {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
	}

	/deep/ .van-field__input {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
	}
</style>
